<template>
    <main-layout>
        <div  class="container">
            <h4>收藏的猪猪</h4>
            <div class="content">
             <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有了哟~"
                @load="onLoad"
                >
                <!-- :title="item"  -->
                <van-cell v-for="item in list" :key="item">
                    <span>
                        <img src="../../image/pig.png" alt="">
                    </span>
                    <div  class="right"> 
                    <h5>猪八戒的老家</h5>
                    <span>特色猪:大凉山跑山猪 </span>
                    <p>介绍:原产自大凉山，经过了九九八十一天的放养，纯天然，肉质紧实鲜美</p>
                    </div>
                </van-cell>
                </van-list>
            </div>
        </div>
    </main-layout>
</template>
<script>
export default {
      data() {
    return {
      list: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= 10) {
          this.finished = true;
        }
      }, 1000);
    },
  },
}
</script>
<style lang="less" scoped>
.container{
    height:calc(100% - 50px);
    >h4{
        padding: 5px;
        text-align: center;
        font-weight: 500;
    }
    >.content{
        border-top:1px solid rgb(182, 180, 180) ;
        height: calc(100% - 40px);
        overflow-x: hidden;
        >.van-list{
            height: 100%;
        }
        .van-cell__value{
            height: 100px;
            position: relative;
            display: flex;
            >span{
                display:block;
                height: 100px;
                width: 85px;
                background-color: green;
                >img{
                height: 100px;
                width: 85px;
                }
            }
              >.right{
                padding: 0 15px;
                height: 100%;
                flex:0 0 250px;
             >h5{
                 font-size: large;
             }
             >p{
                 font-size: .65rem;
             }
             >span{
                 font-weight: 400;
             }
        }
        }
      
    }
}
</style>